Twitter adds oEmbed – Adding it to WordPress with a snippet
Missed the news last week or so, but Twitter added oEmbed provider support to their API. While previous methods have existed to easily post tweets (such as Blackbird Pie), oEmbed is built into the WordPress core.
However, since Twitter didn’t implement oEmbed discovery, and WP has discovery off by default anyway, you have to resort to a small bit of code to make it work. Here’s that bit of code:
add_filter('oembed_providers','twitter_oembed');
function twitter_oembed($a) {
$a['#http(s)?://(www\.)?twitter.com/.+?/status(es)?/.*#i'] = array( 'http://api.twitter.com/1/statuses/oembed.{format}', true);
return $a;
}
Here’s what happens when you put that code in a plugin (for example) and just paste a twitter URL into a post:
@otto42 Led Zeppelin can 😛 RT @otto42 Even Google knows that one does not simply walk into Mordor.
— Bad † Friday (@NephilimGhost) December 21, 2011
It handles RT’s pretty neatly, I think. 🙂
This may make it into WordPress by default in the next version. Too bad they came out with it too late for inclusion in WordPress 3.3.
[…] oEmbed between WordPress and Twitter. This capability was added a few minutes ago after I pasted Otto’s code snippet into my theme’s functions.php file: So can an oEmbed’ed tweet also embed the Youtube […]
Wow finally… I was wondering when/if they’d do that… blackbird pie was okay but sucks to have yet another addon and script. So thanks for the snippet… it’ll be nice to have that patch in core soon. 🙂
Thanks for the code! Any idea how we can make this responsive for Twenty Eleven (and other responsive themes)? The oEmbed puts an inline style of “width:550px !important;”, which isn’t fun to override on the .twp-container element (which may or may not change, as Twitter’s developer documentation says they may change the CSS classes if they choose. I tried wrapping wrapping the oEmbed in another div, but can’t get it to override the inline from Twitter.
Actually, it’s not their oembed service that’s adding that, it’s their widgets.js code that’s doing it. Their oembed provider returns a blockquote tag and some pretty straightforward text, along with a script call to src=”//platform.twitter.com/widgets.js”. That script is modifying the DOM after loading.
So, you do the same and modify their widths via JS. Only way I can see to do it.
It’s actually pulling it in to the blockquote tag. Viewing source here, the blockquote is calling this:
It’s doing the same for me on Twenty Eleven. If you get the default code from Twitter, that width element isn’t there, which is what’s causing the !important style to pass to the DOM. Since your code is just adding the handler to the WordPress oEmbed list, could it be something in Core that’s adding a default width?
Code not working, but it’s adding width=”550″ to the blockquote element
It’s not the core doing it. It’s not the oembed doing it. It’s Twitter’s widgets.js code. Really. I’ve looked at the code. I know what is happening here.
The oembed HTML being returned has no width. But it does have a call to twitter’s widgets.js file.
That javascript code is modifying the HTML after the fact. It’s changing the blockquotes and such to add the divs and the widths and so on. So if you want to override it, you need to add javascript code of your own.
You cannot do this with PHP or CSS. The PHP and CSS are not the problem. You must modify the DOM with some JS of your own to change this.
Note that you can reduce the width just by specifying it in the embed shortcode call. Like so:
[embed width=400]https://twitter.com/…[/embed]
But it appears to max out at 550px, and won’t go higher. Lower though is no problem.
Right, but this is where that inline style comes from. Whatever you set as the width in the embed shortcode is what gets set as the !important width in the inline style, as it gets passed to the blockquote in the width element (not from widget.js). If you set the embed width to 400, you get a width: 400px !important; as an inline style. Set it to 300, you get the same results with 300 as the width. Leaving the width black (or not using the embed shortcode at all) defaults it to 550px.
Ahh, yes, I see. The maxwidth is appended automatically by the code, regardless of what it’s set to, and this changes Twitter’s oembed output to have that width on the blockquote.
Well, easily fixed. Just modify the blockquote to not have the width.
add_filter('oembed_result','twitter_no_width',10,3); function twitter_no_width($html, $url, $args) { if (false !== strpos($url, 'twitter.com')) { $html = str_replace('width="550"','',$html); } return $html; }Without the width on the blockquote, the widgets.js doesn’t transform it into the inline style.
You’re awesome! Thanks for that code! I just dropped into a plugin file with the other above code, plus code I wrote to wrap the whole oEmbed in another div 🙂
Hi.
I want to make a wordpress page which displays the last 10 tweets in this way.
My idea : Write a php function that gives out the last 10 links in the way “https://twitter.com/statuses/’user’/’status-id’ “.
But that didn’t solve the problem. It justs inserts the links on the page but there is no embeded tweet. So your code only shows results when the link is already there…
Do you have an idea how i can do it?
Jens, check your status URLS; user comes before ‘statuses’.
Right. But that do not solve the problem. Only the links are displayed …
Any reason you can think of off the top this wouldn’t work? I’ve tried it in a plugin and in functions.php. If I just place the URI it get’s posted plain text. If I wrap it in embed I get a clickable URI.
made it work
[…] in December 2011 Otto described in a comment how to filter the oembed_result so I used that code to modify the HTML like […]
[…] existing embedded tweets you'll need to re-save the posts to regenerate the embed code.Thanks to Otto for the tip. This entry was posted in Fixes, PHP, Tips, Web Design, WordPress by Ben Collier. Bookmark the […]
[…] can also try stripping out the width argument by filtering on oembed_result like Otto mentioned but I think CSS is the better way to go. Tested on Android and iOS 5. […]
[…] code based on Otto’s […]
[…] 参照元: Twitter adds oEmbed – Adding it to WordPress with a snippet […]
[…] Thanks to Otto for the tip. […]
[…] in December 2011 Otto described in a comment how to filter the oembed_result so I used that code to modify the HTML like […]
[…] oEmbed between WordPress and Twitter. This capability was added a few minutes ago after I pasted Otto’s code snippet into my theme’s functions.php […]